<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>省级统计</title>
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel="stylesheet" href="static/css/style.css" />
    <script type="text/javascript" src="static/js/jquery.min.js" ></script>
    <script type="text/javascript" src="static/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="layui/layui.js" ></script>
    <script src="static/js/base.js" charset="utf-8"></script>
    <script src="static/js/ax.js" charset="utf-8"></script>
    <script type="text/javascript" src="static/js/avalon.js" ></script>
    <script type="text/javascript" src="static/js/echarts-all.js" ></script>

    <!--[if lt IE 9]>
    <script src="static/js/html5.js"></script>
    <script src="static/js/respond.js"></script>
    <![endif]-->
</head>
<body>

<!--主体内容-->
<div class="layui-fluid" ms-controller="index">
    <div class="statis layui-card content-wrap" style="margin-bottom: 20px;">
        <div class="statis_title layui-row">
            <div class="layui-col-md6">
                全国截止今日学员报名数量
            </div>
            <div class="layui-col-md6">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test2">

                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15" style="position: relative;">
        <div class="layui-col-md8 indexleft">
            <div class="layui-card">
                <div class="hearder_title layui-fluid"><h5 class="index_icon1">各科目考试合格率</h5></div>
                <div class="layui-fluid">
                    <div class="layui-row layui-col-space20 loopfun">
                        <div class="layui-col-md3 layui-col-xs6 div1"><span>科目一</span></div>
                        <div class="layui-col-md3 layui-col-xs6 div2"><span>科目二</span></div>
                        <div class="layui-col-md3 layui-col-xs6 div3"><span>科目三</span></div>
                        <div class="layui-col-md3 layui-col-xs6 div4"><span>科目四</span></div>
                    </div>
                </div>

            </div>

            <div class="layui-card margintop20">
                <div class="hearder_title layui-fluid"><h5 class="index_icon2">在培人数</h5></div>
                <div class="layui-fluid">
                    <div class="layui-row layui-col-space20 numlist">
                        <div class="layui-col-md3 layui-col-xs6">
                            <h5><b>156</b><span>科目一</span></h5>
                        </div>
                        <div class="layui-col-md3 layui-col-xs6">
                            <h5><b>189</b><span>科目二</span></h5>
                        </div>
                        <div class="layui-col-md3 layui-col-xs6">
                            <h5><b>209</b><span>科目三</span></h5>
                        </div>
                        <div class="layui-col-md3 layui-col-xs6">
                            <h5><b>224</b><span>科目四</span></h5>
                        </div>
                    </div>
                </div>

            </div>


        </div>
        <div class="layui-col-md4 indexright">
            <div class="layui-card paddingbt">
                <div class="hearder_title layui-fluid"><h5 class="index_icon3">性别比例</h5></div>
                <ul class="news">
                    <li :for="($index, el) in @newslist"><a href="#" :click="seeinfo(el.id)">{{el.noticeTitle}}</a><span>{{el.publishTime}}</span></li>


                </ul>
            </div>
        </div>
    </div>
    <div class="layui-card margintop20 ksnav">
        <div class="hearder_title layui-fluid"><h5 class="index_icon4">快捷入口</h5></div>
        <div class="layui-fluid">
            <ul>
                <li><a href="#"><img src="static/images/ksnav_1.png">学员录入</a></li>
                <li><a href="#"><img src="static/images/ksnav_2.png">学员管理</a></li>
                <li><a href="#"><img src="static/images/ksnav_3.png">意向录入</a></li>
                <li><a href="#"><img src="static/images/ksnav_4.png">跟进管理</a></li>
                <li><a href="#"><img src="static/images/ksnav_5.png">公共库管理</a></li>
                <li><a href="#"><img src="static/images/ksnav_6.png">车辆档案</a></li>
                <li><a href="#"><img src="static/images/ksnav_7.png">分校管理</a></li>
                <li><a href="#"><img src="static/images/ksnav_8.png">报名点管理</a></li>
                <li><a href="#"><img src="static/images/ksnav_9.png">场地管理</a></li>
                <li><a href="#"><img src="static/images/ksnav_10.png">添加</a></li>

            </ul>
        </div>
    </div>
</div>
<!--主体内容-->
<script type="text/javascript" src="static/js/raphael.js" ></script>
<script>

    var vm = avalon.define({
        $id: "index",
        newslist:[],
        //通知公告展示
        news:function () {
            ax.get({
                url:backendWebUrl +  '/api/notice/list',
                contentType: "application/x-www-form-urlencoded",
                data: '',
                success: function (r) {
                    console.log(r);
                    if(r.code==0){
                        vm.newslist=r.data.records;
                        for(var i in vm.newslist){
                            vm.newslist[i].publishTime=vm.newslist[i].publishTime.substring(0,11)
                        }
                    }
                },
            });
        },
        //查看
        seeinfo:function (id) {
            top.layer.open({
                type: 2,
                area: ['90%', '80%'],
                fixed: true, //不固定
                maxmin: true,
                content: 'preview.html?id=' + id
            });
        },
        //查看更多
        more:function () {
            top.layer.open({
                type: 2,
                area: ['90%', '80%'],
                fixed: true, //不固定
                maxmin: true,
                content: 'newslist.html'
            });
        }
    });

    vm.$watch('onReady', function () {
        vm.news();
    })

    // console.log($('.indexleft').height())
    // $('.indexright .layui-card').css('height',$('.indexleft').height()-10);
    // $(window).resize(function () {
    //     $('.indexright .layui-card').css('height',$('.indexleft').height()-10);
    //     console.log($('.indexleft').height())
    // })

    var layer;
    layui.use(['element','layer','laydate'], function(){
        var element = layui.element;
        layer=layui.layer;
        var laydate = layui.laydate;

        //年选择器
        laydate.render({
            elem: '#test2'
            ,value: new Date
        });

    });
    window.onload=function(){
        (function(obj){
            obj.win={
                /**
                 * 环形进度条
                 * @param el：DOM对象
                 * @param val:数值
                 * @param bg:背景颜色
                 * @param color:环颜色
                 * @param textColor：数字颜色
                 * @param fontSize：数字字体大小
                 * @param size:环宽度
                 * @param r:环内半径
                 * @param time:动画时间
                 * @param easing:动画类型:
                 *  'linear'
                 *  '<' or 'easeIn' or 'ease-in'
                 *  '>' or 'easeOut' or 'ease-out'
                 *  '<>' or 'easeInOut' or 'ease-in-out'
                 *  'backIn'or 'back-in'
                 *  'backOut' or 'back-out'
                 *  'elastic'
                 *  'bounce'
                 */
                loopFun:function(el,val,bg,color,textColor,fontSize,size,r,time,easing){
                    var si =r+size/2;
                    var xy=r+size;
                    if(val<0||val>100){
                        return alert('请输入0~100之间的数')
                    }
                    var paper = Raphael(el,(r+size)*2,(r+size)*2);
                    paper.circle(xy,xy,r).attr({
                        'stroke-width': size,
                        stroke:bg
                    });
                    paper.customAttributes.arc=function(val){
                        var v = 360*val/100,
                            s = -180,
                            e = s+v,
                            x = xy,
                            y = xy,
                            rad = Math.PI/180,
                            x1 = x+r*Math.sin(-s*rad),
                            y1 = y+r*Math.cos(-s*rad),
                            x2 = x+r*Math.sin(-e*rad),
                            y2 = y+r*Math.cos(-e*rad),
                            path=[
                                ['M',x1,y1],
                                ['A',r,r,0,+(e-s>180),1,x2,y2]
                            ];
                        return {
                            path:path
                        };
                    };
                    var an = paper.path().attr({
                        'stroke-width': size,
                        stroke:color,
                        arc: 0.01
                    });
                    an.animate({
                        stroke:color,
                        arc:val
                    },time,easing);
                    setTimeout(function(){
                        if(val==100){
                            paper.circle(xy,xy,r).attr({
                                'stroke-width': size,
                                stroke:color
                            });
                        }
                    },time);
                    paper.customAttributes.txt=function(val){
                        return {
                            text:Math.floor(val*100)/100+'%'
                        }
                    };
                    var l = paper.text(xy,xy).attr({
                        txt:0,
                        'fill':textColor,
                        'font-size':fontSize,
                        'font-weight':700
                    });
                    l.animate({
                        txt:val
                    },time);
                }
            };
        })(window);

        var r=60;
        var loopw=20;
        var loopval=50;
        if($(window).width()<500){
            r=40;
            loopw=10;
        }

        $(window).resize(function () {
            if($(window).width()<500){
                r=40;
                loopw=10;
            }
        })

        win.loopFun($('.div1')[0],loopval,'#e5e5e5','#47bac2','#47bac2','20px',loopw,r,1000,'linear');
        win.loopFun($('.div2')[0],loopval,'#e5e5e5','#47bac2','#47bac2','20px',loopw,r,1000,'linear');
        win.loopFun($('.div3')[0],loopval,'#e5e5e5','#47bac2','#47bac2','20px',loopw,r,1000,'linear');
        win.loopFun($('.div4')[0],loopval,'#e5e5e5','#47bac2','#47bac2','20px',loopw,r,1000,'linear');


    }

</script>
</body>
</html>
